<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <script src="./tailwindcss.min.js"></script>
    <link href="./daisyui@3.9.4.full.css" rel="stylesheet" type="text/css" />
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 flex items-center justify-center p-4">
    <div class="card w-full max-w-lg bg-green-300 shadow-xl">
        <div class="card-body">
            <h2 class="card-title text-2xl font-bold text-gray-800 mb-4">简单计算器</h2>
            
            <!-- 显示屏 -->
            <div class="bg-gray-100 rounded-lg p-4 mb-6 backdrop-blur-sm bg-opacity-70 shadow-inner">
                <div id="operation" class="text-right text-sm text-gray-500 h-6 mb-1"></div>
                <div id="display" class="text-right text-3xl font-semibold text-gray-800 h-10">0</div>


            </div>

            
            <!-- 基础运算按钮区 -->
            <div class="grid grid-cols-4 gap-3 mb-4" id="basic-calculator">
                <!-- 第一行 -->
                <button onclick="clearAll()" class="btn btn-error col-span-2">AC</button>
                <button onclick="appendOperator('/')" class="btn btn-secondary">÷</button>
                <button onclick="appendOperator('*')" class="btn btn-secondary">×</button>

                <!-- 数字7-9 -->
               <button onclick="appendNumber('7')" class="btn">7</button>
               <button onclick="appendNumber('8')" class="btn">8</button>
                <button onclick="appendNumber('9')" class="btn">9</button>
                <button onclick="appendOperator('-')" class="btn btn-secondary">-</button>

                <!-- 数字4-6 -->
               <button onclick="appendNumber('4')" class="btn">4</button>
               <button onclick="appendNumber('5')" class="btn">5</button>
               <button onclick="appendNumber('6')" class="btn">6</button>
               <button onclick="appendOperator('+')" class="btn btn-secondary">+</button>
                
                <!-- 数字1-3 -->
               <button onclick="appendNumber('1')" class="btn">1</button>
               <button onclick="appendNumber('2')" class="btn">2</button>
               <button onclick="appendNumber('3')" class="btn">3</button>
               <button onclick="calculate()" class="btn btn-primary row-span-2">=</button>
                
                <!-- 数字0和小数点 -->
                <button onclick="appendNumber('0')" class="btn col-span-2">0</button>
                <button onclick="appendNumber('.')" class="btn">.</button>
                <button onclick="appendNumber('.')" class="btn btn-primary">test</button>

            </div>
        </div>
    </div>

    <script>
        let currentInput = '0';
        let fullExpression = '';
        let resetInput = false;

        const display = document.getElementById('display');
        const operationDisplay = document.getElementById('operation');

        function updateDisplay(){
            display.textContent = currentInput;
            operationDisplay.textContent = fullExpression;
        }

        function appendNumber(number){
            if (currentInput == '0' || resetInput) {
                currentInput = number;
                resetInput = false;
            } else{
                currentInput += number;
            }
            fullExpression += number;
            updateDisplay();
        }

         function appendOperator(op){
            fullExpression += op;
            currentInput = '0';
            resetInput = true;
            updateDisplay();
         }

         function appendFunction(func){
            fullExpression += func;
            if (func.endsWith('(')) {
                currentInput = '0';
                resetInput = true;
            } else {
                currentInput =func;
                resetInput = true;
            }
            updateDisplay();
         }

         function calculate(){
            try{
                let expr = fullExpression
                    .replace(/x/g, '*')
                    .replace(/÷/g, '/')
                    .replace(/\^/g, '**');

                    const result = eval(expr);
               currentInput = result.toString();
               fullExpression =currentInput;
               resetInput = true;
               updateDisplay();
             } catch (e) {
                        currentInput ='Error';
                        updateDisplay();
                     }

         }
        
         function clearAll() {
            currentInput ='0';
            fullExpression ='';
            resetInput = false;
            updateDisplay();
         }
        
    </script>
</body>
</html>